<template>
  <!-- 体格检查 -->
    <el-form inline :model="dataForm" ref="dataForm" >
      <el-row class="bg-row">
        <el-form-item label="验光号">
          <el-input  v-model="checkData.checkNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="验光师">
          <el-input  v-model="checkData.checker" readonly></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input  v-model="checkData.checkDate" readonly></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="卡号" v-if="customerData.cardNum">
          <el-input v-model="customerData.cardNum" @keyup.enter.native="getCustomerByCardNo()"></el-input>
        </el-form-item>
        <el-form-item label="卡号" v-else>
          <el-input v-model="customerData.uniqueCode"></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-search" @click="openDialog('customer')">查询</el-button>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="width-125"  v-model="customerData.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input class="width-125" v-if="customerData.gender == 0" value="男" readonly></el-input>
          <el-input class="width-125" v-if="customerData.gender == 1" value="女" readonly></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input class="width-125"  v-model="customerData.birthDay" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input class="width-125"  v-model="customerData.telPhone" readonly></el-input>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" icon="el-icon-collection" @click="openDialog('customerDetail')">详情</el-button>
        </el-form-item>
      </el-row>
      <el-divider content-position="left">眼睛健康评估</el-divider>
      <table class="miui-table">
        <tr>
          <td class="miui-table-label">身高</td>
          <td class="text-left">
            <el-input class="input-width-217" v-model="dataForm.height" placeholder="身高"><span slot="append">CM</span></el-input>
          </td>
          <td class="miui-table-label">体重</td>
          <td class="text-left">
            <el-input class="input-width-217" v-model="dataForm.weight" placeholder="体重"><span slot="append">KG</span></el-input>
          </td>
          <td class="miui-table-label">体温</td>
          <td class="text-left">
            <el-input class="input-width-217" v-model="dataForm.temperature" placeholder="体温"><span slot="append">°C</span></el-input>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td class="miui-table-label" style="width: 60px;"></td>
          <td class="miui-table-label">眼前段及眼附属器</td>
          <td class="miui-table-label">眼底检查</td>
        </tr>
        <tr>
          <td class="miui-table-label" style="width: 60px;">右眼</td>
          <td style="text-align: left;margin-left: 15px;">
            <el-radio-group v-model="dataForm.frontOd">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">异常发现</el-radio>
            </el-radio-group>
            <el-input class="input-width-217" style="margin-left: 15px;" v-if="dataForm.frontOd == 1" v-model="dataForm.frontOdText"></el-input>
          </td>
          <td class="text-left">
            <el-radio-group style="margin-right: 15px;" v-model="dataForm.fundusOd" >
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">异常发现</el-radio>
            </el-radio-group>
            <el-autocomplete v-if="dataForm.fundusOd == 1" class="inline-input" v-model="dataForm.fundusOdText" :fetch-suggestions="querySearch"></el-autocomplete>
          </td>
        </tr>
        <tr>
          <td class="miui-table-label" style="width: 60px;">左眼</td>
          <td style="text-align: left;margin-left: 15px;">
            <el-radio-group v-model="dataForm.frontOs">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">异常发现</el-radio>
            </el-radio-group>
            <el-input class="input-width-217" style="margin-left: 15px;" v-if="dataForm.frontOs == 1" v-model="dataForm.frontOsText"></el-input>
          </td>
          <td class="text-left">
            <el-radio-group style="margin-right: 15px;" v-model="dataForm.fundusOs">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">异常发现</el-radio>
            </el-radio-group>
            <el-autocomplete v-if="dataForm.fundusOs == 1" class="inline-input" v-model="dataForm.fundusOsText" :fetch-suggestions="querySearch"></el-autocomplete>
          </td>
        </tr>
      </table>
      <table class="miui-table">
        <tr>
          <td class="miui-table-label">眼位</td>
          <td class="text-left">
            <el-radio-group v-model="dataForm.eyePosition" style="margin-right: 15px">
              <el-radio label="0">正位</el-radio>
              <el-radio label="1">隐斜</el-radio>
              <el-radio label="2">显斜</el-radio>
            </el-radio-group>
            <el-input class="input-width-217" v-if="dataForm.eyePosition == 1" v-model="dataForm.eyePositionText"
              placeholder="隐斜现象"></el-input>
            <el-input class="input-width-217" v-if="dataForm.eyePosition == 2" v-model="dataForm.eyePositionText"
              placeholder="显斜现象"></el-input>
          </td>
          <td class="miui-table-label">集合近点(NPC)</td>
          <td class="text-left">
            <el-input class="input-width-217" v-model="dataForm.nearPoint" placeholder="集合近点"><span slot="append">cm</span></el-input>
          </td>
        </tr>
      </table>
      <!-- 弹窗，查询顾客 -->
      <search-customer v-if="searchCustomerVisible" ref="searchCustomer" @refreshForm="getCustomerData"></search-customer>
      <!-- 弹窗，顾客详情 -->
      <detail-customer v-if="detailCustomerVisible" ref="detailCustomer"></detail-customer>
    </el-form>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { addChkOptometryBasic, saveCheckResultData, getCheckResult } from '@/api/admin/optometry/optometry'

  import SearchCustomer from '@/components/business/customer-search'
  import DetailCustomer from '@/views/eims/customer/detail'
  export default {
    data() {
      return {
        visible: false,
        activeName: 'six',
        id: '',
        searchCustomerVisible: false,
        detailCustomerVisible: false,
        checkData: {
          checkNumber: '',
          checker: '',
          checkDate: ''
        },
        estimate: [],
        glassTypes: [],
        touchGlass: [],
        trainTypes: [],
        dataForm:{
          doctorsay: '',
          optType: '',
          chkOptometryList: [],
          taketype: '',
          secCheckDate: ''
        },
        chkDatas:[],
        customerData: {
            customerCard: '',
            id: '',
            name: '',
            gender: '',
            birthDay: '',
            telPhone: '',
            cardType: '',
            integral: ''
        },
        rule: {
          checkBallGlassOd: [{ required: true, validator: this.checkBallGlassOd, trigger: 'change' }],
          checkBallGlassOs: [{ required: true, validator: this.checkBallGlassOs, trigger: 'change' }],
          checkPostGlassOd: [{ required: true, validator: this.checkPostGlass, trigger: 'change' }],
          checkPostGlassOs: [{ required: true, validator: this.checkPostGlass, trigger: 'change' }],
          checkAxesOd: [{ required: true, validator: this.checkAxesOd, trigger: 'change' }],
          checkAxesOs: [{ required: true, validator: this.checkAxesOs, trigger: 'change' }],
        }
      }
    },
    components: {
      SearchCustomer,
      DetailCustomer,
    },
    computed: {
      ...mapGetters(['permissions', 'bizData', 'userInfo', 'isCollapse'])
    },
    methods: {
      init(data) {
        this.visible = true
        this.checkData = data.checkData
        this.customerData = data.customer
        this.id = data.id
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.$nextTick(() => {
          if(this.id){
            getCheckResult(this.id).then(result => {
              let resultData = result.data.data
              if(resultData){
                this.dataForm = resultData
              }
            })
          }
        })
      },
      //  打开弹窗
      openDialog(name) {
        switch (name) {
          case 'customer':
            this.searchCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.searchCustomer.init()
            })
            break;
          case 'customerDetail':
            this.detailCustomerVisible = true
            this.$nextTick(() => {
              this.$refs.detailCustomer.init(this.customerData.id, '会员详细')
            })
            break;
        }
      },
      //  获取客户信息
      getCustomerData(data) {
        this.customerData = data
      },
      //  提交保存检查结论数据
      refractiveFormSubmit() {
        let params1 = {
          chkNumber: this.checkData.checkNumber,
          customerId: this.customerData.id,
          customerName: this.customerData.name,
          personId: this.customerData.personId
        }
        if(!this.id){
          // addChkOptometryBasic(params1).then(result => {
          //   this.id = result.data.data
          //   this.$emit('addBasic',result.data.data)
          // })
        }else{
          this.$emit('addBasic',this.id)
        }
      },
      saveRefractive(data) {
        let params1 = {
          optometryBasicId: data,
          customerId: this.customerData.id,
          chkNumber: this.checkData.checkNumber
        }
        this.dataForm.estimate = this.estimate.join(',')
        this.dataForm.glassTypes = this.glassTypes.join(',')
        this.dataForm.touchGlass = this.touchGlass.join(',')
        this.dataForm.trainTypes = this.trainTypes.join(',')
        let params2 = this.dataForm
        saveCheckResultData(Object.assign(params1,params2)).then(result => {
          if(result.data.data){
            this.$message.success('检查结论保存成功')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 3px;
      border: solid 1px #fff;
      text-align: center;
      color: #000;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #000;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
    .width-60 {
      width: 60px;
    }
    .width-40 {
      width: 40px;
    }
  }
</style>
